<template>
  <div class="zt-video">
    <video style="object-fit: fill" ref="video"
     src="./test.mp4"
    ></video><!-- webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow"   -->
  </div>
</template>

<script>
  export default {
    props: {
      playLink: {
        type: String,
        default: './test.mp4'
      }
    },
    data() {
      return {
      }
    },
    methods: {
      _play () {
        this.$refs.video.play()
      },
      _load () {
        this.$refs.video.load()
      }
    },
    computed: {
    },
    mounted() {
    },
    created() {
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.zt-video{
  position: relative;
  width: 100%;
  height: 100%;
  background:black; 
  video{
    position: absolute;
    display:block;
    height:100%;
    left:50%;top:0;
    transform: translateX(-50%)
  }
}
</style>